<template>
  <div class="web maxwh" ref="web">
    <ul class="maxwh flex flex_w">
      <li class="flex_a_j" :style="{width:liWidth,height:liWidth}" v-for="(item,index) in imgList" :key="index">
        <van-image width="90%" height="90%" :src="'/imgs/user/'+(index%33)+'.jpg'" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth:
        document.body.clientWidth || document.documentElement.clientWidth,
      imgList: 99,
      liWidth: 0,
    };
  },
  watch: {
    screenWidth(val) {
      console.log('窗口大小变化：', val);
      this.liWidth = (val - 8) / 10 + 'px';
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth =
          document.body.clientWidth || document.documentElement.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
    // 这里-8，是减去自定义滚动的宽度
    this.liWidth = (this.screenWidth - 8) / 10 + 'px';
  },
};
</script>